<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="base_page.html">
<link rel="import" href="profile_discovery_list_item.html">

<dom-module id="profile-discovery-list-page">
  <template>
    <style include="cr-shared-style iron-flex">
      [slot='page-body'] {
        height: 300px;
        margin-top: -20px;
      }

      profile-discovery-list-item {
        height: 64px;
      }

      #container {
        height: 230px;
        margin-top: 20px;
        overflow-x: hidden;
        overflow-y: auto;
      }

      iron-list > *:not(:first-of-type) {
        border-top: var(--cr-separator-line);
      }
    </style>
    <base-page>
      <div slot="page-body">
        <div>[[i18n('profileListPageMessage')]]</div>
        <div id="container" class="layout vertical flex" scrollable>
          <iron-list id="profileList" items="[[pendingProfiles]]"
              scroll-target="container"
              selection-enabled="[[!showBusy]]"
              preserve-focus
              selected-item="{{selectedProfile}}"
              role="listbox">
            <template>
              <profile-discovery-list-item profile="[[item]]"
                  selected="[[isProfileSelected_(item, selectedProfile)]]"
                  tabindex="0"
                  role="option"
                  aria-selected="[[isProfileSelected_(item, selectedProfile)]]"
                  show-loading-indicator="[[showBusy]]">
              </profile-discovery-list-item>
            </template>
          </iron-list>
        </div>
      </div>
    </base-page>
  </template>
  <script src="profile_discovery_list_page.js"></script>
</dom-module>
